import BsButton from "@lib/Button";
import BsDropdown from "@lib/Dropdowns";
import { FcCheckBox, FcInput, FormItemFloating } from "@lib/FormControl";
import FcInputGroup, { FcInputGroupText } from "@lib/FormControl/InputGroup";
import FcLabel from "@lib/FormControl/Label";
import FcFormText from "@lib/FormControl/Text";
import FcTextarea from "@lib/FormControl/Textarea";
import type { RouteDefinition } from "@solidjs/router";

const InputGroupDemo = () => {
  return (
    <div>
      <div>
        <h1>Demo</h1>
        <FcInputGroup classList={["mb-3"]}>
          <FcInputGroupText>@</FcInputGroupText>
          <FcInput></FcInput>
        </FcInputGroup>
        <FcInputGroup classList={["mb-3"]}>
          <FcInput placeholder="Recipient's username"></FcInput>
          <FcInputGroupText>@example.com</FcInputGroupText>
        </FcInputGroup>
        <div class="mb-3">
          <FcLabel for="basic-url">Your vanity URL</FcLabel>
          <FcInputGroup>
            <FcInputGroupText>https://example.com/users/</FcInputGroupText>
            <FcInput id="basic-url"></FcInput>
          </FcInputGroup>
          <FcFormText>
            Example help text goes outside the input group.
          </FcFormText>
        </div>
        <FcInputGroup classList={["mb-3"]}>
          <FcInputGroupText>$</FcInputGroupText>
          <FcInput></FcInput>
          <FcInputGroupText>.00</FcInputGroupText>
        </FcInputGroup>
        <FcInputGroup classList={["mb-3"]}>
          <FcInput></FcInput>
          <FcInputGroupText>@</FcInputGroupText>
          <FcInput></FcInput>
        </FcInputGroup>
        <FcInputGroup>
          <FcInputGroupText>With Textarea</FcInputGroupText>
          <FcTextarea></FcTextarea>
        </FcInputGroup>
      </div>
      <div>
        <h1>Sizing</h1>

        <FcInputGroup classList={["mb-3"]} controlSize="sm">
          <FcInputGroupText>With Textarea</FcInputGroupText>
          <FcTextarea></FcTextarea>
        </FcInputGroup>

        <FcInputGroup classList={["mb-3"]}>
          <FcInputGroupText>With Textarea</FcInputGroupText>
          <FcTextarea></FcTextarea>
        </FcInputGroup>

        <FcInputGroup classList={["mb-3"]} controlSize="lg">
          <FcInputGroupText>With Textarea</FcInputGroupText>
          <FcTextarea></FcTextarea>
        </FcInputGroup>
      </div>
      <div>
        <h1>Checkboxs and Radios</h1>
        <FcInputGroup classList={["mb-3"]}>
          <FcInputGroupText>
            <FcCheckBox classList={["mt-0"]}></FcCheckBox>
          </FcInputGroupText>
          <FcInput></FcInput>
        </FcInputGroup>

        <FcInputGroup classList={["mb-3"]}>
          <FcInputGroupText>
            <FcCheckBox classList={["mt-0"]}></FcCheckBox>
          </FcInputGroupText>
          <FcInput></FcInput>
        </FcInputGroup>
      </div>
      <div>
        <h1>Multiple Inputs</h1>
        <FcInputGroup>
          <FcInputGroupText>First And Last Name</FcInputGroupText>
          <FcInput></FcInput>
          <FcInput></FcInput>
        </FcInputGroup>
      </div>
      <div>
        <h1>Multiple addons</h1>
        <FcInputGroup classList={["mb-3"]}>
          <FcInputGroupText>$</FcInputGroupText>
          <FcInputGroupText>.00</FcInputGroupText>
          <FcInput></FcInput>
        </FcInputGroup>

        <FcInputGroup classList={["mb-3"]}>
          <FcInput></FcInput>
          <FcInputGroupText>$</FcInputGroupText>
          <FcInputGroupText>.00</FcInputGroupText>
        </FcInputGroup>
      </div>
      <div>
        <h1>Button addons</h1>
        <FcInputGroup classList={["mb-3"]}>
          <BsButton outline>Button</BsButton>
          <FcInput></FcInput>
        </FcInputGroup>
      </div>

      <div>
        <h1>Button And DropDowns</h1>
        <FcInputGroup classList={["mb-3"]}>
          <BsDropdown
            noContainer
            defaultProps={{
              variant: "secondary",
            }}
            listProps={{
              classList: { "dropdown-menu-dark": true },
            }}
            items={[
              <BsDropdown.Item as="a" href="#">
                1
              </BsDropdown.Item>,
              <BsDropdown.Item as="a" href="#">
                2
              </BsDropdown.Item>,
              <BsDropdown.Item as="a" href="#">
                3
              </BsDropdown.Item>,
            ]}
          >
            Dropdown button
          </BsDropdown>
          <FcInput></FcInput>
        </FcInputGroup>
      </div>
      <div>
        <h1>Floating</h1>
        <FormItemFloating label={"UserName"} classList={["mb-3"]}>
          <FcInput placeholder="name@example.com"></FcInput>
        </FormItemFloating>
      </div>
    </div>
  );
};

export const InputGroupDemoRoute: RouteDefinition = {
  path: "/input-group",
  component: InputGroupDemo,
};

export default InputGroupDemoRoute;
